<template>
    <div class="infomationConsultationDetail">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/infomationConsultation' }">消息资讯</el-breadcrumb-item>
            <el-breadcrumb-item>{{typeText[type]}}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :model="ruleForm" size="small" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
            <el-form-item label="新增类型：">
                <el-radio-group :disabled="type!=='new'" v-model="ruleForm.type">
                    <el-radio :label="0">头条</el-radio>
                    <el-radio :label="1">政策</el-radio>
                    <el-radio :label="2">任务</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- 头条区 -->
            <el-form-item label="选择终端：" v-show="ruleForm.type === 0">
                <el-radio-group :disabled="type==='view'" v-model="ruleForm.terminal">
                    <el-radio :label="0">经纪人端</el-radio>
                    <el-radio :label="1">好生活好房</el-radio>
                    <el-radio :label="2">管家端</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- 头条区 - 好生活好房 -->
            <el-form-item label="头条推荐：" v-if="ruleForm.type === 0 && ruleForm.terminal === 1">
                <el-radio-group :disabled="type==='view'" v-model="ruleForm.headline" style="display: inline-block">
                    <el-radio :label="0">是</el-radio>
                    <el-radio :label="1">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="分类：" v-if="ruleForm.type === 0 && ruleForm.terminal === 1">
                <el-checkbox-group :disabled="type==='view'" v-model="ruleForm.sortType" style="display: inline-block">
                    <el-checkbox label="1">房产头条</el-checkbox>
                    <el-checkbox label="2">国家政策</el-checkbox>
                    <el-checkbox label="3">房市动态</el-checkbox>
                    <el-checkbox label="4">新闻资讯</el-checkbox>
                    <el-checkbox label="5">合生专场</el-checkbox>
                    <el-checkbox label="6">珠江专场</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="城市站：" v-if="ruleForm.type === 0 && ruleForm.terminal === 1">
                <el-select :disabled="type==='view'" v-model="ruleForm.cityCode" filterable>
                    <el-option label="全国站" value="100100">
                    </el-option>
                    <el-option v-for="item in citys"
                               :key="item.cityId"
                               :label="item.city"
                               :value="item.cityId">
                    </el-option>
                </el-select>
            </el-form-item>

            <!-- 政策、任务 -->

            <el-form-item label="政策类型：" v-if="ruleForm.type === 1">
                <el-radio-group :disabled="type==='view'" v-model="ruleForm.policyType" style="display: inline-block">
                    <el-radio :label="0">普通政策</el-radio>
                    <el-radio :label="1">限购政策</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="适用城市：" v-if="ruleForm.type === 1">
                <el-checkbox-group :disabled="type==='view'" v-model="ruleForm.isAllCity" class="mr20">
                    <el-checkbox :label="1">全国</el-checkbox>
                </el-checkbox-group>
                <el-select v-model="ruleForm.cityId" :disabled="type==='view' && ruleForm.isAllCity.indexOf(1) > -1" filterable multiple>
                    <el-option v-for="item in citys"
                               :key="item.cityId"
                               :label="item.city"
                               :value="item.cityId">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="标题：" prop="title">
                <el-input v-model="ruleForm.title" :disabled="type==='view'" placeholder="请输入标题" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="内容：" prop="text">
                <ckeditor v-model="ruleForm.text" :disabled="type==='view'" @input="getcontent"></ckeditor>
            </el-form-item>


            <el-form-item v-if="type!=='view'" style="text-align: center">
                <el-button type="primary" @click="publish">发布</el-button>
                <el-button @click="returnList">取消</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>

<script>
    import ckeditor from '@/components/common/ckeditor'

    export default {
        name: "infomationConsultationDetail",
        components: {ckeditor},
        data() {
            return {
                type: '',
                typeText: {
                    new: '新增',
                    edit: '编辑',
                    view: '查看'
                },
                pageType: '',
                citys: [],
                selectCity: [],
                rules: {
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'},
                    ],
                    text: [
                        {required: true, message: '请输入内容', trigger: 'blur'},
                    ]
                },
                ruleForm: {
                    type: 0,  //类型
                    terminal: 0, //终端
                    headline: 0, //头条推荐 0是 1否
                    sortType: [], //分类 1房产头条 2房市动态 3新闻资讯 4国家政策 5合生专场 6珠江专场
                    cityCode: '100100', //城市ID

                    policyType: 0, //政策下类型
                    isAllCity: [1],
                    cityId: [], // 适用城市的id


                    /* 通用 */
                    title: '',  //标题
                    text: '', //文本


                    checkCount: '', //浏览次数

                    count: '', //
                    createTime: '', //
                    delStatus: '', //删除标识

                    logo: '', //
                    logoUrl: '', //

                    pushPer: '', //发布者
                    role: '', //角色

                    tag: '', //0发布，1编辑


                    url: '', //
                }


            }
        },
        created() {
            this.type = this.$route.query.type;
            let id = this.$route.query.id
            if (this.type !== 'new' && id) {
                this.getSingleData(id)
            }
            this.loadCity()
        },
        methods: {
            publish() {
                let params = {}

                console.log(this.ruleForm);
                // case1  头条 好房端
                // case2  头条 经纪人端和管家端
                if (this.ruleForm.type === 0) {
                    if (this.ruleForm.terminal === 1) {
                        params = {
                            cityCode: this.ruleForm.cityCode,
                            headline: this.ruleForm.headline + '',
                            logoUrl: "",
                            policyType: "0",
                            sortType: this.ruleForm.sortType.join(','),
                            terminal: this.ruleForm.terminal,
                            text: this.ruleForm.text,
                            title: this.ruleForm.title,
                            type: "0",
                        }
                    } else {
                        params = {
                            cityCode: this.ruleForm.cityCode,
                            headline: "0",
                            logoUrl: "",
                            policyType: "0",
                            sortType: this.ruleForm.sortType.join(','),
                            terminal: this.ruleForm.terminal,
                            text: this.ruleForm.text,
                            title: this.ruleForm.title,
                            type: "0",
                        }
                    }
                } else if (this.ruleForm.type === 1) {
                    let cityCode = ""
                    if (this.ruleForm.isAllCity.length) {
                        cityCode = "100100"
                    } else {
                        if (this.ruleForm.cityId.length) {
                            cityCode = this.ruleForm.cityId.join(',')
                        } else {
                            this.$message.warning("请选择适用城市");
                            return false
                        }
                    }
                    params = {
                        cityCode,
                        logoUrl: "",
                        policyType: this.ruleForm.policyType,
                        text: this.ruleForm.text,
                        title: this.ruleForm.title,
                        type: "1"
                    }
                } else {
                    params = {
                        cityCode: '',
                        logoUrl: "",
                        policyType: "0",
                        text: this.ruleForm.text,
                        title: this.ruleForm.title,
                        type: "2"
                    }
                }
                this.$refs.ruleForm.validate((valid) => {
                    if (!valid) {
                        return false
                    }
                    if (this.type === 'new') {
                        this.$axios.post("/cms/news/add", params).then((res) => {
                            this.$message.success(this.typeText[this.type] + "成功！")
                            this.returnList()
                        })
                    } else {
                        this.$axios.post("/cms/news/update", {
                            id: this.$route.query.id,
                            ...params
                        }).then((res) => {
                            this.$message.success(this.typeText[this.type] + "成功！")
                            this.returnList()
                        })
                    }
                });
            },
            returnList() {
                this.$router.push({path: "./infomationConsultation"})
            },
            getSingleData(id) {
                this.$axios.post("/cms/news/find", {id}).then(res => {
                    console.log(res);
                    let ruleForm = {}
                    if (res.type === '0') {
                        if (res.terminal === 1) {
                            ruleForm = {
                                cityCode: res.cityCode,
                                headline: res.headline,
                                logoUrl: "",
                                policyType: "0",
                                sortType: res.sortType.split(','),
                                terminal: res.terminal,
                                text: res.text,
                                title: res.title,
                                type: 0,
                            }
                        } else {
                            ruleForm = {
                                cityCode: res.cityCode,
                                headline: 0,
                                logoUrl: "",
                                policyType: "0",
                                sortType: res.sortType.split(','),
                                terminal: res.terminal,
                                text: res.text,
                                title: res.title,
                                type: 0,
                            }
                        }
                    } else if (res.type === '1') {
                        ruleForm = {
                            logoUrl: "",
                            policyType: +res.policyType,
                            text: res.text,
                            title: res.title,
                            type: 1
                        };
                        if (res.cityCode === '100100') {
                            ruleForm.isAllCity = [1]
                        } else {
                            ruleForm.isAllCity = []
                            ruleForm.cityId = res.cityCode.split(',')
                        }
                    } else {
                        ruleForm = {
                            cityCode: '',
                            logoUrl: "",
                            policyType: "0",
                            text: res.text,
                            title: res.title,
                            type: 2
                        }
                    }

                    this.ruleForm = Object.assign(this.ruleForm, ruleForm)
                    console.log(this.ruleForm);
                })
            },
            getcontent() {

            },
            loadCity() {
                this.$axios.post("/city/region/getCity/byRegion", {}).then(res => {
                    this.citys = res
                })
            },


        },
        computed: {}
    }
</script>
<style lang="stylus" scoped>
    .infomationConsultationDetail
        .el-checkbox-group
            display: inline-block;


</style>
